import { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useDispatch } from 'react-redux';

import FastImage from '@d11/react-native-fast-image';

import { CommonHeader } from './common/commonHeader';
import { CommonSpinner } from './common/commonSpinner';
import { BottomBtn } from './component/bottomBtn';
import { PriceList } from './component/priceList';
import { TextList } from './component/textList';
import { SubscriptionProvider } from './context/SubscriptionContext';
import { pxToVh, pxToVw } from '@/utils/pxToVx';

export const SubscriptionOne = () => {
  const inset = useSafeAreaInsets();
  const dispatch = useDispatch();

  // useEffect(() => {
  //   FirebaseEvents.general_ts_subscription_access_page_paywall(
  //     'SubscriptionSix',
  //   );
  //   dispatch(reset());
  // }, []);

  return (
    <>
      <SubscriptionProvider>
        <View>
          <CommonSpinner />
          <CommonHeader />
          <FastImage
            style={[styles.five_img_bg, { top: pxToVh(0) + inset.top }]}
            // source={require('@assets/images/home/icon_pay_six_bg.png')}
          />
          <View style={[styles.text_content, { marginTop: pxToVh(300) + inset.top }]}>
            <FastImage
              style={styles.six_text_img}
              // source={require('@assets/images/home/icon_pay_six_text_bg.png')}
            />
            <TextList />
            <PriceList />
            <BottomBtn />
          </View>
        </View>
      </SubscriptionProvider>
    </>
  );
};

const styles = StyleSheet.create({
  five_img_bg: {
    height: pxToVh(289),
    position: 'absolute',
    left: pxToVw(0),
    right: pxToVw(0),
    top: pxToVh(0),
  },
  text_content: {},
  six_text_img: {
    width: pxToVw(326),
    height: pxToVh(193),
    position: 'absolute',
    left: pxToVw(35),
  },
});
